<html>
<head>
<title>WEB-NODEJS学习笔记</title>
<style type = "text/css">
{text-indent: 1cm}
</style>
</head>
<body>
<h3>1、web 网页项目的运作原理</h3></br>
<a href = "https://blog.csdn.net/family080205/article/details/81709081">原文链接</a></br>
	<p>
	<ol start = "1">		   
	  <li>客户端在通过浏览器访问服务器端存放的JSP时，JSP中的java代码、
	  标签等是在服务器端运行的，生成普通的html，最终返回客户端的是这些html。</li>
	  <li>JSP在服务器端是被编译成为servlet的，这些servlet负责提供html的输出，
	  因此说JSP和Servlet一样属于服务器端的技术。但是从地址栏里输入的可能有jsp后缀，
	  并不表示它就是客户端运行的。</li>
	  <li>jsp页面是在web服务器上运行的。
	  jsp页面需要加载类似tomcat服务器上，通过内部转换成servlet加载执行，返回执行的结果，也就是转换后的html格式的数据，经过浏览器解析，呈现给用户。
	</li>
	</ol>
</p>

<a href="https://www.cnblogs.com/Diamond-sjh/p/11324138.html" >node处理get与post请求</a> </br>
<a href="https://www.cnblogs.com/Diamond-sjh/p/11324138.html" ><img src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOsjau.img?h=1536&w=2560&m=6&q=60&o=f&l=f" alt="lost picture" width="304" height="228"></a> </br>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"></br>

<b><a href= " http://www.javaworld.com/javaqa/2002-08/01-qa-0823-appvswebserver.html ">App server 与 Web server之间的区别</a></b>



<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>

<h3>2、基础的服务端案例以及说明</h3>
</br><p>var http = require('http');
</br>var fs = require('fs');
</br>var url = require('url');
</br>//不必配置域名或者主机名，用户知道我的域名或者主机名（假设我的个人博客很出名，租得起服务器！哈哈哈）之后直接访问我的服务器
</br>//我的服务器解析用户（客户端）发送过来的请求信息，也就是(https://hostname:portnumber/{datapath}/dataname.datatype)
</br>//--这个是被客户端的浏览器工具封装好的,我（服务器）这边需要解析请求
</br>//（一般有固定的格式{header{...}:body{...}:tailer{}}--协议不同格式也会不同），设计算法加快解析，符合用户预期（图片类型，文本类型，
</br>//我可能需要使用深度学习,图片语义提取进行一个快速的匹配，搜索算法等将最终的消息反馈给用户--并且数据格式是友好的界面是精心设计的美观的，
</br>//同时记录用户喜好，向用户推送类似商业单广告）
</br>//所以服务器的架构和部署很重要，这将很大程度上影响用户体验，其次就是算法，然后就是反馈内容的美观，用户使用与交互的便捷舒适
</br>//，优化f服务器内存。
</br>//对于后台开发人员来说可以通过终端返回的信息，确定现在的服务器实在那个主机上面运行。
</br>
</br>// 创建服务器
</br>http.createServer( function (request, response) {  
</br>&emsp;    // 解析请求，包括文件名
</br>&emsp;    var pathname = url.parse(request.url).pathname;
</br>&emsp;    // 输出请求的文件名
</br>&emsp;    console.log("Request for " + pathname + " received.");
</br> &emsp;   // 从文件系统中读取请求的文件内容
</br>&emsp;    fs.readFile(pathname.substr(1), function (err, data) {
</br> &emsp; &emsp;      if (err) {
</br> &emsp; &emsp;         console.log(err);
</br> &emsp; &emsp;         // HTTP 状态码: 404 : NOT FOUND
</br> &emsp; &emsp;         // Content Type: text/html
</br> &emsp;         response.writeHead(404, {'Content-Type': 'text/html'});
</br> &emsp;      }else{
</br>&emsp; &emsp;          // HTTP 状态码: 200 : OK
</br> &emsp; &emsp;         // Content Type: text/html
</br>&emsp; &emsp;          response.writeHead(200, {'Content-Type': 'text/html'});    
</br>         
</br> &emsp; &emsp;         // 响应文件内容
</br> &emsp; &emsp;         response.write(data.toString());        
</br> &emsp;&emsp;       }
</br>&emsp; &emsp;       //  发送响应数据
</br>&emsp; &emsp;       response.end();
</br>&emsp;    });   
</br>}).listen(8080);
 
</br>// 控制台会输出以下信息
</br>console.log('Server running at http://127.0.0.1:8080/');
</p>

<h3>AJAX - onreadystatechange 事件地址</h3></br> 
<a href= "https://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html"> 原文链接<button type="button"></button></a></br>
<p>                                                        
onreadystatechange 事件                                                                   </br>     
当请求被发送到服务器时，我们需要执行一些基于响应的任务。                               </br>     	
每当 readyState 改变时，就会触发 onreadystatechange 事件。                               </br>     
readyState 属性存有 XMLHttpRequest 的状态信息。                                          </br>  								
下面是 XMLHttpRequest 对象的三个重要的属性：                                             </br>     
属性 &nmsp&nmsp	描述                                                                            </br>     
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 </br>     
readyState	                                                                                    
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
<ol>                                 </li>
	<li>0: 请求未初始化                 </li>
	<li>1: 服务器连接已建立             </li>
	<li>2: 请求已接收                   </li>
	<li>3: 请求处理中                   </li>
	<li>4: 请求已完成，且响应已就绪    </li>
	<ol>
	status：
	<li>200: "OK"<、li>
	<li>404: 未找到页面</li>
	<li>在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。</li>
	<li>当 readyState 等于 4 且状态为 200 时，表示响应已就绪：</li>
	</ol>
</ol>
</p>   

<h3>async函数</h3></br> 
<a href= "https://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html"> 原文链接<button type="button"></button></a></br>


<p>                                                        
async函数是使用async关键字声明的函数。 async函数是AsyncFunction构造函数的实例， 并且其中允许使用await关键字。                 </br>
async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise。                        </br>
async函数还可以被作为表达式来定义。		
																							   </br>
																							   </br>
function resolveAfter2Seconds() {                                                              </br>
&emsp;  return new Promise(resolve => {                                                        </br>
&emsp;&emsp;    setTimeout(() => {                                                             </br>
&emsp;&emsp;&emsp;      resolve('resolved');                                                   </br>
&emsp;&emsp;    }, 2000);                                                                      </br>
&emsp;  });                                                                                    </br>
}                                                                                              </br>
																							   </br>
async function asyncCall() {                                                                   </br>
&emsp;  console.log('calling');                                                                </br>
&emsp;  const result = await resolveAfter2Seconds();                                           </br>
&emsp;  console.log(result);                                                                   </br>
&emsp;  // expected output: "resolved"                                                         </br>
}                                                                                              </br>
																							   </br>
asyncCall();                                                                                   </br>
																					   </br>
</p>   



<h3>使用Sequelize</h3></br> 
<a href= "https://www.liaoxuefeng.com/wiki/1022910821149312/1101571555324224"> 原文链接<button type="button"></button></a></br>
<p>                                                        																				   </br>
</p>   



<h3>优雅管理WEB-Server-API接口版本（v1/v2/v3…）</h3></br> 
<a href= "https://blog.csdn.net/createNo_1/article/details/89457433"> 原文链接<button type="button"></button></a></br>
<p>                                            

<br>	<h4>一、前言</h4>
<br>	一个web项目中，随着需求的变更或增加，API接口也会跟着变化，而如果APP发布后，已使用的接口肯定不能直接覆盖更新，
<br>	需要新增升级版本接口和新的APP版本对应，因此多个版本接口更替后，如何更优雅管理不同版本接口代码，
<br>	如何设计更直观的接口文档呈现给app端，这是我们后端工程师需要考虑的事情，下面总结接口版本管理经验。
<br>	<h4>二、接口代码版本规范</h4>
<br>	考虑到接口今后一定会进行版本迭代，因此一开始开发的时候，就需要对代码进行版本考量下的代码目标架构。
<br>	1. 控制器目录架构：
<br>	v1版本控制器目录：apps/controller/v1/……
<br>	v2版本控制器目录：apps/controller/v2/……
<br>	    在controller下增加子集文件夹：controller/v1/……、controller/v2/……等等，初始版本的接口全部放在v1下。
<br>	2. 接口路由设计
<br>	v1版本接口路由：/v1/login
<br>	v2版本接口路由：/v2/login
<br>	3. 不同版本控制器代码分类依据
<br>	（1）在发布APP前的所有代码，都属于v1版本代码；
<br>	（2）发布APP后，如果是新增加的需求，和已发布v1版本接口需求不冲突，新增控制器或接口，仍然属于v1版本代码；
<br>	（3）发布APP后，如果新增需求和v1已发布版本接口冲突，为了兼容老版本APP，必须在v2文件夹下新增控制器开发v2版本接口。
<br>	遵循以上分类原则，依次递推，严格区分不同版本接口代码，结合下一部分的接口文档，利于不同版本接口更新维护。
<br>	<h4>三、不同版本接口文档规范</h4>
<br>	版本迭代的接口，如果写在一起，APP真的要疯。最好能给APP一种重新开始的感觉，归零后，面对新接口，沟通起来新老接口文档区别明显，这就大大避免了无谓的撕逼。具体接口文档设计如下：
<br>	| —— 文档快捷导航
<br>	| —— 产品交互流程
<br>	&emsp;&emsp;| —— v1版本
<br>	&emsp;&emsp;| —— v2版本
<br>	&emsp;&emsp;| —— ……
<br>	| —— 文档规范
<br>	&emsp;&emsp;| —— 接口规范（接口地址，请求方式，接口参数，响应参数）
<br>	&emsp;&emsp;| —— 接口文档规范
<br>	&emsp;&emsp;| —— ……
<br>	| —— 开发计划
<br>	| —— 全局状态码
<br>	| —— 【v1】API文档
<br>	&emsp;&emsp;| —— v1接口文档说明：包含v1接口基础地址、状态码、推送码等说明；
<br>	&emsp;&emsp;| —— v1接口更新日志
<br>	&emsp;&emsp;| —— 用户模块
<br>	&emsp;&emsp;| —— 设备模块
<br>	| —— 【v2】API文档
<br>	&emsp;&emsp;| —— v2接口文档说明：包含v2接口基础地址、状态码、推送码等说明；
<br>	&emsp;&emsp;| —— v2接口更新日志
<br>	&emsp;&emsp;| —— 用户模块
<br>	&emsp;&emsp;| —— 设备模块
<br>	
<br>目录说明：
<br>    1. 文档快捷导航：根据接口目录结构，把不同版本接口汇总到表格中，然后对应加上接口文档链接，让APP对接时更容易定位接口位置，如：

<br>【v1】API  [文档说明(带链接)]  [更新日志(带链接)]	 
<br>	路由	说明
<br>	/v1/login（带指向接口文档的链接）	用户登录
<br>	/v1/user/info（带指向接口文档的链接）	获取用户详情
<br>	……	 
<br>	【v2】API [文档说明(带链接)]  [更新日志(带链接)]	 
<br>	路由	说明
<br>	/v2/login（带指向接口文档的链接）	用户登录
<br>	/v2/user/info（带指向接口文档的链接）	获取用户详情
<br>	……	 
<br>	    2. 全局状态码：根据接口、推送等不同板块业务需求，对不同业务下的接口设计不同数字段的状态码，遇到这样设计下的状态码，沟通或出现问题更容易定位接口，如：
<br>	       指定200为正确响应状态码，500为服务器异常响应状态码；
<br>	       其他情况下，根据业务模块区分，用户功能相关接口非正确响应状态码指定1001~1050；设备操作功能模块非正确响应状态码指定1051~1100，以此类推。
<br>	    3. 接口更新日志说明：APP对接接口前，不用记录接口更新日志；APP对接后，接口输入参数或输出参数有变化时，需记录接口更新日志，接口更新日志记录模板如下：
<br>	
<br>	格式如下：
<br>	日期【年-月-日】
<br>	1. 功能模块文件夹名称：接口名称（带链接），[增加 | 减少] [必要 | 非必要] [上报 | 响应] 参数 xxx；
<br>	2. 功能模块文件夹名称：接口名称（带链接），[增加 | 减少] [必要 | 非必要] [上报 | 响应] 参数 xxx；
<br>	……
<br>	如：
<br>	 
<br>	2019-04-22
<br>	 
<br>	1. 用户模块：用户登录，增加必要上报参数type；
<br>	2. 设备模块：添加设备，增加响应参数name字段；
<br>	……
<br>	2019-04-25
<br>	1. 用户模块：用户登录，增加必要上报参数type；
<br>	2. 设备模块：添加设备，增加响应参数name字段；
<br>	
            																				   </br>
</p>  

<h2>VUE</h2></br>
<a>原文链接</a></br>
<p>	
VUE中封装了，网页的模板html，网页的样式css,网页的逻辑与动态，可能包括客户端逻辑。
VUE:router实现页面的跳转功能，通过组件进行切换。


</p>



<h2>VUE</h2></br>
<a>原文链接</a></br>
<p>	
</p>



 
</body>

</html>